<template lang="pug">
.user_wish
    .wishList
        ul
            li(v-for="(item,index) in wish_list"   )
                .wishCart
                    GameItemIdCard(:appid="Number(index)")
                    div {{item}}
                    input(type="checkbox" :value="index" v-model="checkedList")
                    .wishListDel(@click="WishListDel(Number(index))")
    .buttonList
        .AddToOrder( @click="AddToOrder")  AddToOrderCart


</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import type {UserDetail} from "../../utils/types/UserInfo";
import {UserDetailGet} from "../../reqApi/UserApi";
import type {ResultInfo} from "../../utils/types/ResultInfo";
import {LogSuccess} from "../../utils/notification/Index";
import GameItemIdCard from "../utils/game/GameItemIdCard.vue";
import {UserOrderCartAdd, UserWishListDel} from "../../reqApi/UserCart";
import router from "../../router";

const wish_list = ref(new Map<number, string>)

const UserDetailData = ref<UserDetail>()
const checkedList = ref<number[]>([])


const WishListDel = (appid: number) => {
    UserWishListDel({
        app_ids: [appid]
    }).then(resp => {
        const result = resp.data as ResultInfo<any>
        LogSuccess(result.msg)
        if (result.success) {
            router.go(0)
        }
    })
}


const AddToOrder = () => {
    let numbers = checkedList.value.map(Number);
    if (numbers.length <= 0) {
        LogSuccess("加了个寂寞")
        return
    }
    UserOrderCartAdd({
        app_ids: [...numbers]
    }).then(resp => {
        const result = resp.data as ResultInfo<string>
        LogSuccess(result.msg)
        if (result.data) {
            localStorage.setItem("UserOrderCart", result.data);
        }
    });
};

onMounted(() => {
    UserDetailGet().then(resp => {
        const result = resp.data as ResultInfo<UserDetail>
        if (result.success) {
            UserDetailData.value = result.data
            wish_list.value = result.data?.wish_list || new Map<number, string>()
        }
        LogSuccess(result.msg)
    })
})
</script>
<style lang="sass" scoped>

@import "../../assets/sass/user/wishiList"

</style>
